<kubernetes-view-header title="Advanced deployment" state="kubernetes.deploy" view-ready="ctrl.state.viewReady"> Deploy Kubernetes resources </kubernetes-view-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <kubernetes-feedback-panel></kubernetes-feedback-panel>

  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body>
          <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
            <uib-tab index="0">
              <uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> Deploy </uib-tab-heading>

              <form class="form-horizontal" style="margin-top: 20px">
                <div class="form-group" ng-if="ctrl.formValues.Namespace">
                  <label for="target_node" class="col-lg-1 col-sm-2 control-label text-left">Namespace</label>
                  <div class="col-lg-11 col-sm-10">
                    <select class="form-control" ng-model="ctrl.formValues.Namespace" ng-options="namespace.Name as namespace.Name for namespace in ctrl.namespaces"></select>
                  </div>
                </div>
                <div class="form-group" ng-if="!ctrl.formValues.Namespace">
                  <div class="col-sm-12 small text-muted">
                    <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
                    You do not have access to any namespace. Contact your administrator to get access to a namespace.
                  </div>
                </div>

                <div class="form-group">
                  <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
                  <div class="col-lg-11 col-sm-10">
                    <input type="text" class="form-control" ng-model="ctrl.formValues.StackName" id="stack_name" placeholder="my-app" auto-focus />
                  </div>
                </div>

                <div class="col-sm-12 form-section-title"> Build method </div>
                <box-selector
                  radio-name="'method'"
                  value="ctrl.state.BuildMethod"
                  options="ctrl.methodOptions"
                  data-cy="k8sAppDeploy-buildSelector"
                  on-change="(ctrl.onChangeMethod)"
                ></box-selector>

                <div ng-if="ctrl.state.BuildMethod !== ctrl.BuildMethods.CUSTOM_TEMPLATE">
                  <div class="col-sm-12 form-section-title"> Deployment type </div>
                  <box-selector
                    radio-name="'deploy'"
                    value="ctrl.state.DeployType"
                    options="ctrl.deployOptions"
                    data-cy="k8sAppDeploy-deploymentSelector"
                    on-change="(ctrl.onChangeDeployType)"
                  ></box-selector>
                </div>

                <!-- repository -->
                <git-form
                  ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT"
                  model="ctrl.formValues"
                  on-change="(ctrl.onChangeFormValues)"
                  additional-file="true"
                  auto-update="true"
                  show-auth-explanation="true"
                  path-text-title="Manifest path"
                  path-placeholder="deployment.yml"
                  deploy-method="{{ ctrl.DeployMethod }}"
                ></git-form>
                <!-- !repository -->

                <custom-template-selector
                  ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE"
                  new-template-path="kubernetes.templates.custom.new"
                  stack-type="3"
                  on-change="(ctrl.onChangeTemplateId)"
                  value="ctrl.state.templateId"
                ></custom-template-selector>

                <!-- editor -->
                <web-editor-form
                  ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR || (ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId)"
                  identifier="kubernetes-deploy-editor"
                  value="ctrl.formValues.EditorContent"
                  on-change="(ctrl.onChangeFileContent)"
                  ng-required="true"
                  yml="true"
                  placeholder="# Define or paste the content of your manifest file here"
                >
                  <editor-description>
                    <span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.COMPOSE">
                      <p>
                        <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
                        Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that
                        not all the Compose format options are supported by Kompose at the moment.
                      </p>
                      <p>
                        You can get more information about Compose file format in the
                        <a href="https://docs.docker.com/compose/compose-file/" target="_blank">official documentation</a>.
                      </p>
                    </span>
                    <span
                      class="col-sm-12 text-muted small"
                      ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.KUBERNETES && ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR"
                    >
                      <p>
                        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
                        This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).
                      </p>
                      <p>
                        You can get more information about Kubernetes file format in the
                        <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
                      </p>
                    </span>
                  </editor-description>
                </web-editor-form>

                <!-- !editor -->

                <!-- url -->
                <div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.URL">
                  <div class="col-sm-12 form-section-title"> URL </div>
                  <div class="form-group">
                    <span class="col-sm-12 text-muted small"> Indicate the URL to the manifest. </span>
                  </div>
                  <div class="form-group">
                    <label for="manifest_url" class="col-sm-1 control-label text-left">URL</label>
                    <div class="col-sm-11">
                      <input
                        type="text"
                        class="form-control"
                        ng-model="ctrl.formValues.ManifestURL"
                        id="manifest_url"
                        placeholder="https://raw.githubusercontent.com/kubernetes/website/main/content/en/examples/controllers/nginx-deployment.yaml"
                        data-cy="k8sAppDeploy-urlFileUrl"
                      />
                    </div>
                  </div>
                </div>
                <!-- !url -->

                <!-- actions -->
                <div class="col-sm-12 form-section-title"> Actions </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <button
                      type="button"
                      class="btn btn-primary btn-sm"
                      ng-disabled="ctrl.disableDeploy()"
                      ng-click="ctrl.deploy()"
                      button-spinner="ctrl.state.actionInProgress"
                      data-cy="k8sAppDeploy-deployButton"
                      analytics-on
                      analytics-category="kubernetes"
                      analytics-event="kubernetes-application-advanced-deployment"
                      analytics-properties="ctrl.buildAnalyticsProperties()"
                    >
                      <span ng-hide="ctrl.state.actionInProgress">Deploy</span>
                      <span ng-show="ctrl.state.actionInProgress">Deployment in progress...</span>
                    </button>
                  </div>
                </div>
                <!-- !actions -->
              </form>
            </uib-tab>

            <uib-tab index="1" disable="ctrl.state.tabLogsDisabled">
              <uib-tab-heading> <i class="fa fa-file space-right" aria-hidden="true"></i> Logs </uib-tab-heading>
              <form class="form-horizontal" style="margin-top: 20px">
                <div class="form-group" ng-if="ctrl.state.activeTab === 1">
                  <div class="col-sm-12">
                    <code-editor identifier="kubernetes-deploy-logs" read-only="true" yml="false" value="ctrl.errorLog"></code-editor>
                  </div>
                </div>
              </form>
            </uib-tab>
          </uib-tabset>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>
